<template>
  <div class="content">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>{{ t(String(route.meta.title)) }}</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <span class="save"></span>
      </template>
    </nut-navbar>

    <!-- tabs -->
    <nut-tabs @change="tabChange" v-model="value" title-scroll title-gutter="10" v-if="gamblingTabList">
      <nut-tab-pane :title="t(item.name)" :pane-key="item.id" v-for="item in gamblingTabList" :key="item.id">
        <div class="container">
          <div
            v-for="(item, index) in items"
            :key="index"
            class="card"
            :class="{ disabled: item.status === 'stopped' }"
          >
            <div class="info">
              <div class="title">{{ item.title }}</div>
              <div class="price">
                <ImgT class="jinbi" src="/imgs/club/jinbi.png" />
                <span>{{ item.price }}</span>
              </div>
              <span
                v-if="item.status === 'stopped'"
                class="tag"
              >
                <em class="tag_text">已停止</em>
              </span>
            </div>
            <div class="actions">
              <button v-if="item.status !== 'stopped'" class="start" @click="start(item)">开启</button>
              <button v-if="item.status === 'stopped'" class="stopped" @click="stopped(item)">停止</button>
              <button class="dismiss" @click="dismiss(item)">解散</button>
            </div>
            <!-- <div class="overlay" v-if="item.status === 'stopped'"></div> -->
          </div>
        </div>
      </nut-tab-pane>
    </nut-tabs>
    <!-- 申请 -->
    <Modal v-model:visible="isShowWin" title="提示" @close="">
      <div class="popup_body">
        <div class="info">{{ club_tip }}</div>
        <div class="submit_btn">
          <span class="submit_close" @click="close">取消</span>
          <Btn height="44px" width="147px" class="submit" @click="submitAc">确定</Btn>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, reactive, onMounted } from "vue";
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const value = ref(1)
const gamblingTabList = reactive([
  {
    id: 1,
    name: "全部",
  },
  {
    id: 2,
    name: "21点",
  },
  {
    id: 3,
    name: "德州",
  },
  {
    id: 4,
    name: "牛牛",
  },
  {
    id: 5,
    name: "黑杰克",
  },
]);

const seleteType: any = ref("");
const tabChange = (item: any) => {
    value.value = item.paneKey
    const obj: any = {
        1: '全部',
        2: '21点',
        3: '德州',
        4: '牛牛',
        5: '黑杰克'
    }
    seleteType.value = obj[item.title]
}

const items =  reactive([
  { title: '德州快乐小伙伴', price: '$0.25/0.6', status: 'active' },
  { title: '德州快乐小伙伴', price: '$0.25/0.6', status: 'active' },
  { title: '德州快乐小伙伴', price: '$0.25/0.6', status: 'stopped' },
]);


const isShowWin = ref(false);
const club_tip = ref('');
const currentItem:any = ref(null);
const targetStatus = ref(''); 

const handleAction = (item: any, status: any, tip: any) => {
  currentItem.value = item;
  targetStatus.value = status;
  club_tip.value = tip;
  isShowWin.value = true;
};

const start = (item: any) => handleAction(item, 'stopped', '是否停止该牌局?');
const dismiss = (item: any) => handleAction(item, 'dismissed', '是否解散该牌局?');
const stopped = (item: any) => handleAction(item, 'active', '是否开启该牌局?');

// 关闭弹窗
const close = () => {
  isShowWin.value = false;
};

// 确认操作
const submitAc = () => {
  if (currentItem.value) {
    currentItem.value.status = targetStatus.value;
  }
  close();
};

onMounted(async () => {
  seleteType.value = '全部'
  value.value = 1
});

</script>

<style scoped lang="scss">
.content {
  font-size: 14px;
  margin: 0 0 10px;

  .arrow_left {
    width: 24px;
    height: 24px;
  }

  .save {
    line-height: 32px;
    text-align: center;
    color: #5BD9FF;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 347px;
    margin: 0 auto;

    .card {
      position: relative;
      padding: 10px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(19, 18, 50, 0.00) 0%, #2F2D6C 100%), #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

      .info {
        flex-grow: 1;
        .title {
          color: #FFF;
          font-size: 14px;
          font-weight: 500;
        }

        .price {
          color: #C6C4F5;
          font-size: 14px;
          font-weight: 500;
          margin-top: 3px;
          
          .jinbi {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            vertical-align: sub;
          }
        }

        .tag {
          width: 45px;
          height: 36px;
          line-height: 28px;
          font-size: 10px;
          border-radius: 6px;
          color: #fff;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 9;
          background: url(/imgs/club/gly.png) no-repeat;
          background-size: 100% 100%;
          .tag_text {
            display: inline-block;
            transform: rotate(-40deg);
          }
        }
      }

      .actions {
        display: flex;
        gap: 8px;

        button {
          width: 48px;
          height: 32px;
          border: none;
          text-align: center;
          line-height: 32px;
          border-radius: 8px;
          color: #FFF;
          font-size: 12px;
          font-weight: 500;
        }
        .start {
          background: linear-gradient(0deg, #1DBA8B 0%, #1DBA8B 100%);
        }

        .dismiss {
          background: #D16262;
        }

        .stopped {
          background: #bbb;
        }
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        z-index: 99;
      }
    }

    .disabled {
      opacity: 0.5;
    }
  }
}

.popup_body {
  color: #fff;
  padding: 10px;

  .info {
    margin-bottom: 10px;
    text-align: center;
    color: #FFFFFF;
    margin: 24px 0;
  }

  .submit_btn {
    margin: 20px 0;
    display: flex;
    justify-content: space-evenly;

    .submit_close {
      width: 147px;
      height: 42px;
      color: #FFFFFF;
      text-align: center;
      line-height: 44px;
      background: #282747;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      border-radius: 8px;
    }
  }
}
</style>
